import React from 'react';

class HocComponent extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      mouse:{
        x: 0,
        y: 0
      }
    }
  }
  getMousePosition = (e) => {
    this.setState({
      mouse:{
        x: e.clientX,
        y: e.clientY
      }
    })
  }
  render() {
    return <div style={{ height: '300px'}} onMouseMove={this.getMousePosition}>
      {this.props.render(this.state.mouse)}
    </div>
  }
}

const  MouseComponent = (props) =>{
    return <HocComponent render={(mouse) => {
        return <div>
        The mouse target position X: {mouse.x} y: {mouse.y}
        <br/>
        The headParam: {props.head } 
        </div>
      }}>
    </HocComponent>
}

export default MouseComponent

